<template>
	<view>
		<view class="car">
			<view class="goods" v-if="carShow">
				<view class="head">
					<view class="text">已选商品</view>
					<view class="empty" @click="clickClear">清空</view>
				</view>
				<scroll-view scroll-y class="body">
					<view class="sContent">
						<view class="list" v-for="i in carList">
							<!-- 这里面传的i有我们在vuex定义好的goodsid -->
							<carItem :item="i"></carItem>
						</view>
					</view>
				</scroll-view>
			</view>
			<u-toast ref="uToast"></u-toast>
			<view class="content">
				<view class="left">
					<!-- hover-class点击后的样式,hover-stay-time手指松开后的保留时间 -->
					<view v-if="!type" class="icon" hover-class="iconhover" hover-stay-time="50" @click="clickCar">
						<u-icon name="shopping-cart" color="#DA5367" size="28"></u-icon>
						<view class="num">{{buyNum}}</view>
					</view>
					<view class="price">合计<text class="text">￥{{totalPrice}}</text></view>
				</view>
				<view class="right">
					<view class="btn disable" v-if="!type" @click.stop="toConfirmPay">选好了</view>
					<view class="btn" v-else @click.stop="pay">支付</view>
				</view>
			</view>
			<!-- 针对苹果机 -->
			<view class="safe-area-bottom"></view>
		</view>
		<u-overlay :show="carShow" z-index="9" @click="carShow=false" duration="100"></u-overlay>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from "vuex"
	import {
		GetStroage
	} from "@/utils/tool.js"
	export default {
		name: "car",
		props: {
			type: {
				type: Boolean,
				default: false
			},
			way: {
				type: String,
				default: ""
			},
			userInfo: {
				type: Object,
				default () {
					return {}
				}
			},
			addressDefault: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				carShow: false,
				jsonData: {},
				jsonProduct: [],
				msgList: {
					type: "success",
					message: "获取验证码成功"
				}
			};
		},
		computed: {
			...mapGetters(["carList", "totalPrice", "buyNum", "addressObj", "cheap"]), //addressObj是用vuex管理的指定的地址
		},
		methods: {
			...mapMutations(["clearCarList"]),
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			pay() {
				console.log("点击支付", this.carList);
				// console.log(this.way);
				console.log("地址信息:", this.addressObj);
				for (let index = 0; index < this.carList.length; index++) {
					this.jsonProduct.push({
						id: this.carList[index].goodsid,
						name: this.carList[index].name,
						num: this.carList[index].numvalue,
						price: this.carList[index].price,
						preprice: this.carList[index].preprice,
						picurls: this.carList[index].picurls,
					})
				};
				this.jsonData = {
					cheap: this.cheap,
					carList: this.jsonProduct
				};
				// console.log("json列表", this.jsonProduct);
				if (!(this.addressObj.id || this.addressDefault.id)) {
					this.fillMsg("error", "请填写收获地址");
				} else {
					this.submit();
				}
			},
			submit() {
				uni.request({
					url: this.$e.Url + "/order/userSubmit",
					data: {
						cost: this.totalPrice,
						uid: this.userInfo.id,
						addressid: this.addressObj.id || this.addressDefault.id, //没有默认的就选指定的
						goodnum: this.buyNum,
						content: JSON.stringify(this.jsonData),
						way: this.way
					},
					header: {
						"Content-Type": "application/json"
					},
					method: "POST",
					success: (res) => {
						console.log("请求API接口【/order/userSubmit】", res);
						this.fillMsg("success", "支付成功");
						this.clearCarList();
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					}
				})
			},
			toConfirmPay() {
				//token验证
				let token = GetStroage("token");
				if (token) {
					uni.request({
						url: this.$e.Url + "/user/checkToken",
						data: {
							Token: token
						},
						header: {
							'Content-Type': 'application/json'
						},
						method: "GET",
						success: (res) => {
							console.log("请求API接口【/user/checkToken】", res);
							if (res.data.result == false) {
									this.fillMsg("error", "身份过期/异常，请重新登录！");
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/login"
									})
								}, 1500)
							} else {
								console.log("要传的参数", this.carList, this.totalPrice, this.buyNum);
								uni.navigateTo({
									url: "/pages_shop/order/confirmPay",
									events: {},
									success: (res) => {
										let info = {
											carList: this.carList,
											totalPrice: this.totalPrice,
											buyNum: this.buyNum
										};
										res.eventChannel.emit("getData", info);
									}
								})
							}
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
			},
			clickClear() {
				this.clearCarList();
			},
			//点击购物车图标
			clickCar() {
				this.carShow = !this.carShow;
			}
		}
	}
</script>

<style lang="scss">
	.car {
		margin-bottom: 10rpx;
		position: relative; //相对于其正常位置进行定位
		z-index: 10;

		.goods {
			border-bottom: 1rpx solid $border-color;
			padding: 30rpx 30rpx 0; //上、左右、下
			border-radius: 50rpx 50rpx 0 0;
			background: #ffffff;

			.head {
				@include flex-box();
				padding: 5rpx 0 25rpx;
				color: $text-font-color-2;

				.text {}

				.empty {}
			}

			.body {
				height: 550rpx; //固定好高度,否则会整个撑开

				.sContent {
					.list {}
				}
			}
		}

		.content {
			@include flex-box();
			padding: 0 50rpx;
			background: #ffffff;
			height: 120rpx;

			.left {
				@include flex-box();

				.icon {
					width: 60rpx;
					height: 60rpx;
					background: #eeeeee;
					border-radius: 10rpx;
					@include flex-box-set();
					position: relative;

					.num {
						position: absolute;
						top: -15rpx;
						right: -15rpx;
						width: 30rpx;
						height: 30rpx;
						background: $price-color;
						border-radius: 50%;
						font-size: 15rpx;
						color: #ffffff;
						@include flex-box-set();
					}
				}

				.iconhover {
					transform: scale(0.9);
				}

				.price {
					padding-left: 10rpx;
					font-size: 28rpx;

					.text {
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}

			.right {
				.btn {
					width: 140rpx;
					height: 65rpx;
					@include flex-box-set();
					background: $brand-theme-color;
					border-radius: 10rpx;
					color: #ffffff;

					// &.disable {
					// 	opacity: 0.6;
					// }
				}
			}
		}

		.safe-area-bottom {
			width: 100%;
			background: #ffffff;
			height: env(safe-area-inset-bottom); //安全区域
		}
	}
</style>
